<template>
<view class="container">
    <block v-for="(visit, vidx) in visits" :key="vidx">
        <view class="log_date">
            <view class="maleri30">{{ visit.date }}</view>
        </view>
        <view v-for="(item, index) in visit.visit" :key="index" class="visit">
            <navigator class="goods_img" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
            </navigator>
            <view class="goods_detail">
                <navigator class="goods_name" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                    {{ item.goods_name }}
                </navigator>
                <view class="goods_footer">
                    <text class="price">￥{{ item.shop_price }}</text>
                    <navigator class="similar" :url="'/pages/goods/goodsList/goodsList?cat_id=' + item.cat_id">看相似</navigator>
                    <view class="del" @tap="deleteVisit" :data-vidx="vidx" :data-gidx="index">删除</view>
                </view>
            </view>
        </view>
    </block>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      visits: null,
      currentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    var that = this;
    load.init(this, '', 'visits');
    this.requestVisitLog();
  },
  onShow: function () {
    this.resetData();
    this.requestVisitLog();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.resetData();
    this.requestVisitLog();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestVisitLog();
    }
  },
  methods: {
    requestVisitLog: function () {
      var that = this;
      var requestUrl = that.url + '/api/user/visit_log?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        uni.stopPullDownRefresh();
      });
    },
    resetData: function () {
      this.currentPage = 1;
      this.visits = null;
      load.resetConfig();
    },
    deleteVisit: function (e) {
      var that = this;
      var vidx = e.currentTarget.dataset.vidx;
      var gidx = e.currentTarget.dataset.gidx;
      var visits = that.visits;
      request.post('/api/user/del_visit_log', {
        data: {
          visit_ids: visits[vidx].visit[gidx].visit_id
        },
        success: function (res) {
          if (visits[vidx].visit.length == 1) {
            visits.splice(vidx, 1);
          } else {
            visits[vidx].visit.splice(gidx, 1);
          }

          that.setData({
            visits: visits
          });
        }
      });
    }
  }
};
</script>
<style>
page{
  background-color: #f5f5f5;
}
.log_date {
    font-size: 28rpx;
    color: #666666;
    padding: 0rpx 28rpx;
    border-bottom: 1rpx solid #f3f3f3;
    margin-top: 20rpx;
}
.visit {
    background-color: #fff;
    font-size: 28rpx;
    padding: 10rpx 10rpx;
    width: 710rpx;
    margin: 0rpx 20rpx;
    margin-top: 10rpx;
    border-radius: 10rpx;
    overflow: hidden;
    box-sizing: border-box;
}
.goods_img {
    width: 220rpx;
    height: 220rpx;
    border-radius: 10rpx;
    overflow: hidden;
    float: left;
}
.goods_detail {
    padding: 25rpx 0 0rpx 20rpx;
    width: 445rpx;
    float: left;
}
.goods_name{
    height: 64rpx;
    line-height: 32rpx;
    margin-bottom: 80rpx;
    overflow: hidden;
}
.goods_footer{
    height: 50rpx;
}
.price {
    color: #ff6a00;
    float: left;
    margin-top: 6rpx;
}
.similar{
    width: 110rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    margin-left: 20rpx;
    float: right;
    border-radius: 5rpx;
    background: #ff6a00;
    color: #fff;
    font-size: 24rpx;
}
.del{
    width: 110rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    margin-left: 20rpx;
    float: right;
    border-radius: 5rpx;
    background: #FFF;
    color: #999;
    font-size: 24rpx;
    border:1px solid #E6E6E6;
}
.maleri30{
  font-size: 28rpx;
  color: #333;
}
</style>